<template>
    <!-- <Teleport to="#message"> -->
        <div class="alert fixed-top w-50 mx-auto d-flex justify-content-between mt-2" role="alert" :class="classObject"
            v-if="isVisible">
            <strong>{{ message }}</strong>
            <button type="button" class="close" aria-label="Close" @click="hide">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    <!-- </Teleport> -->
</template>

<script lang="ts">
import { PropType, defineComponent, ref } from 'vue'
// import useDOMCreate from '../hooks/useDOMCreate'


export type MessageType = 'success' | 'error' | 'default'
export default defineComponent({
    props: {
        type: {
            type: String as PropType<MessageType>,
            default: 'default'
        },
        message: String
    },
    setup(props) {
        // const node = document.createElement('div')
        // node.id = 'message'
        // document.body.appendChild(node)
        // useDOMCreate('message')
        const isVisible = ref(true)
        const classObject = {
            'alert-success': props.type === 'success',
            'alert-danger': props.type === 'error',
            'alert-primary': props.type === 'default'
        }
        const hide = () => {
            isVisible.value = false
        }
        return {
            isVisible,
            classObject,
            hide
        }
    }
})
</script>
<style scoped></style>